<!-- Sidebar -->
<ul class="nav navbar-nav side-nav collapsed" id="navigation">
    <li class="collapsed-content">
        <!-- Collapsed content pasting here at 768px -->
    </li>
<#if userMenuList??>

    <#list userMenuList as userMenu>
        <#if userMenu.isSelected>
            <li class="dropdown open"><a href="${absoluteContextPath}" class="dropdown-toggle" data-toggle="dropdown"
                                         title="${userMenu.menuName!''}"><i
                    class="fa fa-${userMenu.imageConfig!''}"> <span class="overlay-label red"></span>
            </i>${userMenu.menuName!''}<b class="fa fa-angle-left dropdown-arrow"></b></a>
                <#if userMenu.childrenMenuList?size gt 0>
                <ul class="dropdown-menu">
                </#if>
                <#list userMenu.childrenMenuList as childMenu>
                    <#if childMenu.isSelected>
                        <li class="active"><a href="${absoluteContextPath}${childMenu.menuUrl!''}"
                                              title="${childMenu.menuName!''}"> <i
                                class="fa fa-${childMenu.imageConfig!''}"><span
                                class="overlay-label red60"></span></i>${childMenu.menuName!''}</a></li>
                    <#else>
                        <li><a href="${absoluteContextPath}${childMenu.menuUrl!''}" title="${childMenu.menuName!''}"> <i
                                class="fa fa-${childMenu.imageConfig!''}"><span
                                class="overlay-label red60"></span></i>${childMenu.menuName!''}</a></li>
                    </#if>
                </#list>
                <#if userMenu.childrenMenuList?size gt 0>
                </ul>
                </#if>
            </li>
        <#else>
            <li class="dropdown">
                <#if userMenu.childrenMenuList?size == 0>
                    <a href="${absoluteContextPath}${userMenu.menuUrl!''}" title="${userMenu.menuName!''}"><i
                            class="fa fa-${userMenu.imageConfig!''}"> <span
                            class="overlay-label red"></span></i>${userMenu.menuName!''}
                    </a>
                <#else>
                    <a href="${absoluteContextPath}" class="dropdown-toggle" data-toggle="dropdown"
                       title="${userMenu.menuName!''}"> <i
                            class="fa fa-${userMenu.imageConfig!''}"> <span class="overlay-label red"></span>
                    </i>${userMenu.menuName!''}<b class="fa fa-angle-left dropdown-arrow"></b></a>

                </#if>
                <#if userMenu.childrenMenuList?size gt 0>
                <ul class="dropdown-menu">
                </#if>
                <#list userMenu.childrenMenuList as childMenu>
                    <#if childMenu.isSelected>
                        <li class="active"><a href="${absoluteContextPath}${childMenu.menuUrl!''}"
                                              title="${childMenu.menuName!''}"> <i
                                class="fa fa-${childMenu.imageConfig!''}"><span
                                class="overlay-label red60"></span></i>${childMenu.menuName!''}</a></li>
                    <#else>
                        <li><a href="${absoluteContextPath}${childMenu.menuUrl!''}" title="${childMenu.menuName!''}"> <i
                                class="fa fa-${childMenu.imageConfig!''}"><span
                                class="overlay-label red60"></span></i>${childMenu.menuName!''}</a></li>
                    </#if>
                </#list>
                <#if userMenu.childrenMenuList?size gt 0>
                </ul>
                </#if>
            </li>
        </#if>
    </#list>
</#if>
    <!-- Sidebar end -->
    <script>
        $(function () {
            $('#navigation').addClass('collapsed');
            $('#content').animate({left: "0px", paddingLeft: "40px"}, 0);
            $('#navigation li a').tooltip({
                placement: 'right',
                container: 'body'
            });
        });
    </script>